<template>
    <div class="fillcontain">
        <el-form :model="formData" :rules="rules" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 20px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" @change="schoolchange" style="width: 220px" v-model="formData.schoolid"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.year" placeholder="请选择年份">
                        <el-option
                            v-for="item in yearsList"
                            :key="item.id"
                            :label="item.id"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.month" placeholder="请选择月份">
                        <el-option
                            v-for="item in monthsList"
                            :key="item.id"
                            :label="item.id"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini" style="width: 220px"
                        placeholder="开始周数"
                        prefix-icon="el-icon-search"
                        v-model="formData.startweek">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini" style="width: 220px"
                        placeholder="结束周数"
                        prefix-icon="el-icon-search"
                        v-model="formData.endweek">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="ename"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="所属校区"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="weekOfyear"
                    label="周数"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="totaluser"
                    label="当月总人数"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="onclassuser"
                    label="上课人数"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="attendanceRate"
                    label="出勤率"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="tryuser"
                    label="试课数量"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="tozsuser"
                    label="转正数量"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="chargeuser"
                    label="交费用户"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="stopuser"
                    label="暂停用户"
                    min-width="10%">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {employWeekList} from '@/api/getData'

    export default {
        computed: {
            ...mapGetters(['yearsList', 'adminInfo', 'monthsList', 'weeksList', 'schoolList', 'channelList', 'periodList', 'empschoolMap', 'sexList', 'paytypeList', 'subjectList', 'cardList'])
        },
        data() {
            return {
                empsList: null,
                formData: {
                    schoolid: '',
                    eid: '',
                    year: '',
                    month: '',
                    startweek: '',
                    endweek: '',
                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            headTop,
        },
        created() {
            this.initData();
        },
        mounted() {
            if (this.periodList == null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        methods: {
            ...mapActions(['getGiftList','getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            async initData() {
                const v = await employWeekList({"data": this.formData});
                this.tableData = [];
                var weeklist = null;
                if (v.success == true) {
                    weeklist=v.data;
                    weeklist.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.ename = item.ename;
                        tableData.schoolname = item.schoolname;
                        tableData.totaluser = item.totaluser;
                        tableData.onclassuser = item.onclassuser;
                        tableData.attendanceRate = item.attendanceRate;
                        tableData.tryuser = item.tryuser;
                        tableData.tozsuser = item.tozsuser;
                        tableData.chargeuser = item.chargeuser;
                        tableData.stopuser = item.stopuser;
                        tableData.chargeolduser = item.chargeolduser;
                        tableData.totalcharge = item.totalcharge;
                        tableData.createtime = item.createtime;
                        tableData.year = item.year;
                        tableData.month = item.month;
                        tableData.weekOfmonth = item.weekOfmonth;
                        tableData.weekOfyear = item.weekOfyear;
                        this.tableData.push(tableData);
                    })
                }
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
